<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red-bg{background:red}
        .green-bg{background: aqua}
    </style>
</head>
<body>
<!--Vue的数据会展示到该div中-->
<div id="app">
    {{message}}
    <p>姓名：{{person.name}},年龄：{{person.age}},性别：{{person.gender}}</p>
    <p v-if="person.age>=18">{{person.name}}是成年人！！！</p>
    <p v-else>{{person.name}}是未成年人！！</p>
    <p v-show="person.gender=='男'">{{person.name}}是男的</p>
    <p v-show="person.gender=='女'">{{person.name}}是女的</p>
    <p>姓名：<input type="text" v-model="person.name"></p>
    <p>年龄：<input type="text" v-model="person.age"></p>
    <p>性别：<input type="text" v-model="person.gender"></p>

    <table border="1px" width="400px">
        <tr>
            <th>姓名</th><th>年龄</th><th>性别</th>
        </tr>
        <tr v-for="per in persons" v-bind:class="per.gender=='男'?'red-bg':'green-bg'" v-on:click="showPerson(per)">
            <td>{{per.name}}</td>
            <td>{{per.age}}</td>
            <td>{{per.gender}}</td>
        </tr>
    </table>
</div>
<!--    导入vue的js文件-->
<script src="js/vue.min.js"></script>
<script>
    //创建vue对象  viewModel
    //el是表达式，定位数据展示的位置
    //data是model,需要绑定的数据都定义在data里面
    new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!!!!",
            person:{name:"张三",age:"20",gender:"男"},
            persons:[
                {name:"周三",age:"20",gender:"男"},
                {name:"李四",age:"22",gender:"女"},
                {name:"王五",age:"20",gender:"男"},
                {name:"何六",age:"20",gender:"女"}
            ]
        },
        methods:{
            //显示人的信息
            showPerson(per){
                alert('此人是：'+per.name+',年龄:'+per.age + ',性别：'+per.gender)
            }
        },
        created(){
            console.log('created')
        },
        mounted(){
            console.log('mounted')
        },
        updated(){
            console.log('update')
        },
        unmounted(){
            console.log('unmounted')
        }
    })
</script>
</body>
</html>